<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>在线编译器</title>
        <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
        <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">
        <script type="text/javascript" src="bootstrap-3.3.7/js/bootstrap.min.js"></script>
        <script src="js/jquery-3.4.1.js"></script>
        <!--核心文件-->
        <link href="codemirror/lib/codemirror.css" rel="stylesheet" type="text/css" />
        <!--脚本风格-->
        <link href="codemirror/theme/3024-night.css" rel="stylesheet" type="text/css" />
        <link href="codemirror/theme/monokai.css" rel="stylesheet" type="text/css"  />
        <link href="codemirror/theme/erlang-dark.css" rel="stylesheet" type="text/css" />
        <link href="css/index.css" rel="stylesheet" type="text/javascript" />
        <!--提示框-->
        <link href="codemirror/addon/hint/show-hint.css" rel="stylesheet" type="text/css"/>
        <!--核心文件-->
        <script type="text/javascript" src="codemirror/lib/codemirror.js"></script>
        <!--语言支持-->
        <script type="text/javascript" src="codemirror/mode/clike/clike.js"></script>
        <script type="text/javascript" src="codemirror/mode/python/python.js"></script>
        <!--显示行数-->
        <script type="text/javascript" src="codemirror/addon/selection/active-line.js"></script>
        <!--括号匹配-->
        <script type="text/javascript" src="codemirror/addon/edit/matchbrackets.js"></script>
        <!--提示框-->
        <script src="codemirror/addon/hint/show-hint.js"></script>
        <script src="js/jquery.js"></script>
        <style>
            #form{
                position: absolute;
            }
            #sourceText{
                position: absolute;
                left: 15px;
                top: 100px;
                display: inline;
            }
            #inputdiv{
                position: absolute;
                left: 820px;
                top: 0px;
                width: 100%;
                height: 350px;
            }
            #outputdiv{
                position: absolute;
                left: 15px;
                top: 350px;
                width: 1200px;
                height: 130px;
                font-family: Consolas;
            }
        </style>
    </head>
    <body id="body">
    <div class="panel panel-default">
        <div class="panel-heading" style="text-align: center">
            在线编译器
        </div>
        <div class="panel-body">
            <form role="form" class="form-inline">
                <div class="form-group">
                    <label for="selectCode">语言: </label><!--选择风格-->
                    <select id="selectCode">
                        <option value="text/x-c++src">C++</option>
                        <option value="python">Python</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="selectTheme">风格: </label>
                    <select id="selectTheme" >
                        <option>dafault</option>
                        <option>3024-night</option>
                        <option>monokai</option>
                        <option>erlang-dark</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="sourceName">源文件名： </label>
                    <input type="text" id="sourceName"/>
                </div>
                <div class="form-group">
                    <input type="button" id="run" class="btn btn-default" value="RUN">
                </div>
            </form>
        </div>
    </div>
        <form id="form">
            <textarea id="sourceText"></textarea>
            <div id="inputdiv" class="form-group">
                <label for="inputText">用户输入:</label>
                <textarea class="form-control" rows="5" style="width: 35%;height: 350px" id="inputText"></textarea>
            </div>
            <div id="outputdiv" class="form-group">
                <label for="out">输出:</label>
                <textarea class="form-control" rows="5" style="width: 90%;height: 230px" id="out"></textarea>
            </div>
        </form>
        <script>
            var editor=CodeMirror.fromTextArea(document.getElementById("sourceText"),{
                lineNumbers : true,
                mode : "text/x-c++src",
                indentUnit : 4,
                indentWithTabs: true,
                styleActiveLine : true,
                matchBrackets : true,
                smartIndent: true,
                lineWrapping : true  //代码折叠
            });
            editor.setSize("800px","350px");
            //
            $("#run").click(function () {
                var sourceName=$("#sourceName").val();
                if(sourceName=="")
                    alert("未填文件名!!!:(");
                var sourceText=editor.getValue();
                if (sourceText=="")
                    alert("空文件哦!!!:(");
                var inputText=$("#inputText").val();
                var mode=$("#selectCode").val();
                var url="";
                switch (mode) {
                    case "python":
                        url="/onlineCompilerDemo2/PythonFileServlet";
                        break;
                    case "text/x-c++src" :
                        url="/onlineCompilerDemo2/CppFileServlet";
                        break;
                }
                console.log("sourceText"+sourceText);
                console.log("sourceName"+sourceName);
                console.log("inputText"+inputText);
                $.ajax({
                    url:url,
                    data:{
                        sourceName:sourceName,
                        sourceText:sourceText,
                        inputText:inputText
                    },
                    async:false,
                    success:function (response) {
                        console.log("response"+response);
                        $("#out").text(response);
                    },
                    error:function(XMLHttpRequest, textStatus, errorThrown){
                        alert("状态码:"+XMLHttpRequest.status+" || 状态:"+XMLHttpRequest.readyState+" || 错误信息:"+textStatus);
                    }
                })
            })
            //更改脚本样式
            $("#selectTheme").change(function(){
                var theme=$("#selectTheme").val();
                editor.setOption("theme",theme);
            });
            //更改语言样式
            $("#selectCode").change(function () {
                var mode=$("#selectCode").val();
                editor.setOption("mode",mode);
            });
        </script>
    </body>
</html>